<template>
    <div class="topNav">
        <ul v-show="$route.meta.showNav">
            <li><router-link to="/recommend">推荐音乐</router-link></li>
            <li><router-link to="/hot">热歌榜</router-link></li>
            <li><router-link to="/search">搜索</router-link></li>
            <li><router-link to="/like">收藏</router-link></li>
            <li><router-link to="/my">My</router-link></li>
        </ul>
    </div>
</template>

<script>
export default {
    name : "TopNav"
}
</script>

<style lang="less" scoped>
.topNav{
    position: fixed;
    top: 0px;
    background-color: #fff;
    z-index: 10;
    width: 100%;
    ul{
        height: 40px;
        display: flex;
        border-bottom: 1px solid  rgba(0,0,0,.1);
        text-align: center;
        li{
            height: 40px;
            flex: 1;
            a{  
                display: inline-block;
                padding: 0 5px;
                position: relative;
                font-size: 15px;
                height: 40px;
                line-height: 40px;
                text-decoration: none;
                color: #333;
                &.router-link-exact-active{
                    color: #dd001b;
                    &::after{
                        content: "";
                        position: absolute;
                        left: 0;
                        bottom: -1px;
                        z-index: 3;
                        width: 100%;
                        height: 4px;
                        -webkit-transform: scaleY(.5);
                        transform: scaleY(.5);
                        background: #dd001b;
                    }
                }
            }
        }
    }
}
</style>